<template>
    <!-- html -->
    <div class="app">


        <!-- <Person /> -->
        <!-- <h2 ref="title">你好啊</h2>
         <button @click="getRef">获取App元素</button>
         <button @click="getCompent">获取组件实列</button> -->


        <!-- <Prop :list="persons" xx ="哈哈"/> -->

        <!-- <SmCycle v-if="show" /> -->

        <Route/>
    </div>
</template>

<script lang="ts" setup name="App">
// import Person from './components/Person.vue'

// import Car from './components/Car.vue' 

// import Tores from './components/Tores.vue'

// import xwxw from './components/User/Index.vue'

// import User from './components/User.vue'

// import UserWatch from './components/UserWatch.vue'

// import WatchEffect from './components/WatchEffect.vue'

// import { ref } from 'vue'
// import Ref from './components/Ref.vue'

// import TypeScript from './components/TypeScript.vue'

// import Prop from './components/Prop.vue'
// import {type Persions } from "@/types"
// let persons: Persions = [
//     { id: "1", name: "dada", age: 12 },
//     { id: "2", name: "dada", age: 12 },
//     { id: "3", name: "dada", age: 12 }
// ]

// import SmCycle from './components/SmCycle..vue'
// import { ref, onBeforeMount, onMounted } from 'vue';
// let show = ref(true)
// //挂在前
// onBeforeMount(() => {
//     console.log("父-挂在前")
// })

// //挂在完毕
// onMounted(() => {
//     console.log("父-挂在完毕")
// })

// import Hook from './components/Hook.vue'

//路由
import Route from './components/Route.vue';




//vue2 写法
// js或者ts
// export default {
//     name: 'App',  //组件名
//     components: { WatchEffect } //注册组件
// }

// let title = ref(null)
// let ren = ref(null)

// function getRef(){
//     console.log(title.value)
// }

// //获取组件实列对象
// function getCompent(){
//     console.log(ren.value)
// }

</script>

<style scoped>
/* 样式 */
.app {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
}
</style>